@@include('./include/header.html',{
"path": "."
})
@@include('../components/sidebar/sidebar.html',{
"path": ".",
"menu": {
"dashboard": "",
"messaging": "active",
"uikits": ""
}
})
<div class="app-container app-full">
    @@include('../components/navbar/navbar.html',
    {
    "path": ".",
    "title": "Messaging"
    })
    <div class="app-messaging-container">
        <div class="app-messaging" id="collapseMessaging">
            <div class="chat-group">
                <div class="heading">Converstion</div>
                <ul class="group full-height">
                    <li class="section">unread</li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <span class="badge badge-warning pull-right">10</span>
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <span class="badge badge-warning pull-right">10</span>
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="section">readed</li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message">
                        <a data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <div class="message">
                                <img class="profile" src="https://placehold.it/100x100">
                                <div class="content">
                                    <div class="title">"Payment Confirmation.."</div>
                                    <div class="description">Alan Anderson</div>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="messaging">
                <div class="heading">
                    <div class="title">
                        <a class="btn-back" data-toggle="collapse" href="#collapseMessaging" aria-expanded="false"
                           aria-controls="collapseMessaging">
                            <i class="fa fa-angle-left" aria-hidden="true"></i>
                        </a>
                        Lucia Marshall <span class="badge badge-success badge-icon"><i class="fa fa-circle"
                                                                                       aria-hidden="true"></i><span>Online</span></span>
                    </div>
                    <div class="action"></div>
                </div>
                <ul class="chat">
                    <li class="line">
                        <div class="title">24 Jun 2016</div>
                    </li>
                    <li>
                        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor incididunt
                        </div>
                        <div class="info">
                            <div class="datetime">11.45pm</div>
                            <div class="status"><i class="fa fa-check" aria-hidden="true"></i> Read</div>
                        </div>
                    </li>
                    <li>
                        <div class="message">Lorem ipsum dolor sit amet, consectetur eiusmod tempor incididunt</div>
                        <div class="info">
                            <div class="datetime">11.45pm</div>
                            <div class="status"><i class="fa fa-check" aria-hidden="true"></i> Read</div>
                        </div>
                    </li>
                    <li class="right">
                        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        </div>
                        <div class="info">
                            <div class="datetime">11.46pm</div>
                        </div>
                    </li>
                    <li>
                        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
                        <div class="info">
                            <div class="datetime">11.45pm</div>
                            <div class="status"><i class="fa fa-check" aria-hidden="true"></i> Read</div>
                        </div>
                    </li>
                    <li>
                        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor incididunt
                        </div>
                        <div class="info">
                            <div class="datetime">11.45pm</div>
                            <div class="status"><i class="fa fa-check" aria-hidden="true"></i> Read</div>
                        </div>
                    </li>
                    <li>
                        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor
                        </div>
                        <div class="info">
                            <div class="datetime">11.45pm</div>
                            <div class="status"><i class="fa fa-check" aria-hidden="true"></i> Read</div>
                        </div>
                    </li>
                    <li>
                        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
                        <div class="info">
                            <div class="datetime">11.45pm</div>
                            <div class="status"><i class="fa fa-check" aria-hidden="true"></i> Read</div>
                        </div>
                    </li>
                    <li class="line">
                        <div class="title">25 Jun 2016</div>
                    </li>
                    <li class="right">
                        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor incididunt
                        </div>
                        <div class="info">
                            <div class="datetime">11.46pm</div>
                        </div>
                    </li>
                    <li>
                        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor
                        </div>
                        <div class="info">
                            <div class="datetime">11.45pm</div>
                            <div class="status"><i class="fa fa-check" aria-hidden="true"></i> Read</div>
                        </div>
                    </li>
                    <li>
                        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
                        <div class="info">
                            <div class="datetime">11.45pm</div>
                            <div class="status"><i class="fa fa-check" aria-hidden="true"></i> Read</div>
                        </div>
                    </li>
                    <li class="right">
                        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor incididunt
                        </div>
                        <div class="info">
                            <div class="datetime">11.46pm</div>
                        </div>
                    </li>
                </ul>
                <div class="footer">
                    <div class="message-box">
                        <textarea placeholder="type something..." class="form-control"></textarea>
                        <button class="btn btn-default"><i class="fa fa-paper-plane"
                                                           aria-hidden="true"></i><span>Send</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@@include('./include/footer.html',{
"path": "."
})